<template>
  <yk-layout-page>
    <yk-layout-page-item>
      <yk-table title="单选框(默认选中)" ref="selectionTable" :table="table" :columns="table.columns" @radioChange="radioChange"
        :isShowPagination="false" :defaultRadioCol="1">
        <template #toolbar>
          <el-button size="default" type="primary" @click="RadioSelect">选中第二条</el-button>
        </template>
      </yk-table>
    </yk-layout-page-item>
  </yk-layout-page>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
let table = ref({
  firstColumn: { type: "radio", fixed: true },
  // 接口返回数据
  data: [
    {
      id: "1",
      date: "2019-09-25",
      date1: "2019-09-26",
      name: "张三",
      status: "2",
      address: "广东省广州市天河区"
    },
    {
      id: "2",
      date: "2019-09-26",
      date1: "2019-09-27",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
    },
    {
      id: "3",
      date: "2019-09-26",
      date1: "2019-09-28",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
    },
    {
      id: "4",
      date: "2019-09-26",
      date1: "2019-09-29",
      name: "张三1",
      status: "1",
      address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
    }
  ],
  // 表头数据
  columns: [
    { prop: "name", label: "姓名", minWidth: "100" },
    { prop: "date", label: "日期", minWidth: "180" },
    { prop: "status", label: "状态", minWidth: "80" },
    { prop: "address", label: "地址", minWidth: "220" }
  ]
})
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
// 选择单选框
const radioChange = (val: any) => {
  console.log("选择单选框", val)
}
// 选中第二条
const RadioSelect = () => {
  selectionTable.value.defaultRadioSelect(2)
}
</script>
